<template>
  <div class="container">
    <div class="top">
      <div class="up">
        <img src="https://img1.baidu.com/it/u=911451610,3416826403&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
        <div class="name">
          {{ name }}
        </div>
        <div class="right">
          <el-tag class="m">{{ college }}</el-tag>
          <el-tag type="warning" class="m">{{ tel }}</el-tag>
          <el-tag class="m" type="success" v-if="studentId.value!=null">{{ studentId }}</el-tag>
        </div>
      </div>
      <div class="down">
        <el-icon>
          <Notification/>
        </el-icon>
        温馨提示 ：只有第一作者才能查看参赛作品
      </div>
    </div>
    <div class="table">
      <el-table ref="tableRef" row-key="date" :data="list[0]" style="width:100%;margin: 10px auto;">
        <el-table-column prop="name" label="名称" width="180"/>
        <el-table-column prop="field" label="赛道" width="180"/>
        <el-table-column prop="teacher1" label="第一指导老师" width="180"/>
        <el-table-column prop="score" label="分数" width="180"/>

        <el-table-column
            prop="grade"
            label="status"
            width="180"
            filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag
                :type="scope.row.grade === '未审核' ? '' : 'success'"
                disable-transitions
            >{{ scope.row.grade }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="updatedAt"
            label="审核日期"
            sortable
            width="180"
            column-key="date"
        />
      </el-table>
    </div>

    <div class="demo1" style="width: 100px;height: 200px;">
      <div id="loading">
        <div id="loading-center">
          <div id="loading-center-absolute">
            <div class="object" id="object_four"></div>
            <div class="object" id="object_three"></div>
            <div class="object" id="object_two"></div>
            <div class="object" id="object_one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="text">
      <img src="@/assets/text.jpg" alt=""
           style="width: 500px;height: 50px; background-size: contain;transform: translateY(-180px) translateX(120px)">
    </div>
  </div>
</template>

<script setup>

import {ref, reactive, onMounted, inject} from 'vue'

const axios = inject("$axios")
const list = reactive([[]])
const tel = ref(window.localStorage.getItem("telephone"))
const name = ref(window.localStorage.getItem("name"))
const studentId = ref(window.localStorage.getItem("studentId"))
const college = ref(window.localStorage.getItem("college"))
const tableData = reactive([
  {
    grade: "",
    remark: "",
    score: "",
    category: "",
    name: "",
    updatedAt: ""
  }
])
onMounted(() => {


  axios.get("user/info?tel=" + tel.value).then(res => {
    studentId.value = res.data.studentid
    college.value = res.data.college
    window.localStorage.setItem("studentId", studentId.value)
    window.localStorage.setItem("studentId", studentId.value)
    window.localStorage.setItem("college", college.value)
    axios.get("sub/personal?studentId=" + studentId.value).then(res => {
      list[0] = res.data
    })

  })

})
</script>

<style scoped lang="less">
@media screen and(min-width: 480px) {
  .container {
    width: 90%;
    max-width: 1200px;
    min-height: 100vh;
    margin: 10px auto;
    padding-left: 20px;

    .top {
      width: 100%;
      margin-top: 30px;
      background-color: #ffffff;
      height: 120px;
      border-radius: 10px;
      margin-bottom: 20px;

      .up {
        display: flex;
        justify-content: flex-start;

        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          transform: translateY(-30px);
          margin-left: 30px;
        }

        .name {
          font-size: 16px;
          color: #000000;
          margin: 20px;
          font-weight: 700;
        }

        .right {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          padding-right: 30px;

          div {
            margin: 20px;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: #909399;
            font-size: 14px;
          }
        }
      }

      .m {
        margin: 20px 10px;
      }

      .down {
        color: #A8ABB2;
        margin-left: 20px;
        transform: translateY(-20px);
      }
    }

    .table {
      min-height: 300px;
      background-color: #ffffff;
      padding: 10px;
      border-radius: 10px;
      width: 100%;
      margin: 10px auto;
    }
  }
}

@media screen and(max-width: 480px) {
  .container {
    width: 100vw;
    min-height: 100vh;
    margin: 10px auto;

    .top {
      width: 97%;
      background-color: #ffffff;
      height: 170px;
      border-radius: 10px;
      margin-bottom: 20px;
      box-sizing: border-box;
      margin: 10px auto;
      margin-top: 30px;

      .up {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          transform: translateY(-30px);
        }

        .name {
          font-size: 16px;
          color: #000000;
          margin: 20px;
          font-weight: 700;
          transform: translateY(-50px);
        }

        .right {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          padding-right: 30px;
          transform: translateY(-70px);

          div {
            margin: 20px;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: #909399;
            font-size: 14px;
          }
        }
      }

      .m {
        margin: 20px 10px;
      }

      .down {
        color: #A8ABB2;
        margin-left: 20px;
        transform: translateY(-80px);
      }
    }

    .table {
      min-height: 300px;
      background-color: #ffffff;
      padding: 10px;
      border-radius: 10px;
      width: 97%;
      margin: 10px auto;
    }
  }
}

</style>